<template>
  <div>
    <el-dialog
      title="收藏"
      :visible.sync="collecShow"
      append-to-body
      width="45%"
      class="eldialog">
      <el-table
        :data="tableCollect"
        :header-cell-style="{background:'#f9f9ff'}"
        border
        style="width: 100%;"
        max-height="350">
        <el-table-column
          prop=""
          type="index"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="companyName"
          label="公司名称">
          <template slot-scope="scope">
            <span data-count="goCollectBtn" class="name_link" @click.stop="enterCompany(scope.row, true)">{{scope.row.companyName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click.stop="deleteRow(scope.row)"
              type="text"
              size="small">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <vPagination :total="total" :ips="pageSize" @currentPage="getCurrentPage"/>
    </el-dialog>
    <!-- 数据进度 -->
    <el-dialog
      title="数据生成进度"
      :visible.sync="dialogPercent"
      :before-close="closeTypes"
      width="45%"
      append-to-body
      class="eldialog">
      <el-progress class='elprogress' :percentage="percent"></el-progress>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeTypes">后台处理</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import vPagination from './vPagination'
let types = null
export default {
  inject: ['reload'],
  // props: ['dialogVisible'],
  components: {
    vPagination
  },
  data() {
    return {
      collecShow:false,
      tableCollect: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      dialogPercent: false,
      percent: 0,
      cancel: null,
    }
  },
  mounted(){
  
  },
  methods: {
    // 获取收藏列表
    getCollect(){
      this.collecShow = true
      this.fn()
    },
    fn(){
      this.$get(`${this.$Url.company.collectPage}/${this.currentPage}/${this.pageSize}`)
        .then(data => {
          let datas = data.data;
          if(datas.result.length&&datas.result.length>0){
            this.total = datas.total;
            var hash = {};
            this.tableCollect = datas.result.reduce(function(item, next) {
                hash[next.companyId] ? '' : hash[next.companyId] = true && item.push(next);
                return item
            }, [])
            
          }else{
            this.tableCollect = []
          }
        }).catch(error => {
        console.log(error);
      })
    },
    // 跳转公司
    enterCompany(row, isNeedCheck) {
      let companyName = row.companyName
      let eid = row.companyId
      if(companyName.indexOf('xxxx')>-1){
        this.$message({
          type: 'error',
          message: '当前账号暂无权限访问！'
        })
        return
      }

      types = null
      let checkUrl = this.$Url.search.check
      if(!isNeedCheck){
        checkUrl = this.$Url.search.check2
      }
      let ths = this
      this.$get(checkUrl,{
        companyName: companyName,
        eid: eid
      }, new axios.CancelToken(function executor(c) {
        ths.cancel = c
      })).then(res => {
        // 无访问权限
        if(res.status === 40305){
          return
        }
        // 默认重置公司是否有专利的cookie
        // this.$cookie.set('isHavePatent', true)
        if(res.status === 40401){
          this.$message({
            type: 'error',
            message: res.message
          })
          return
        }

        if(res.data.type == 0){
          if(types != null){
            clearTimeout(types)
            types = null;
          }
          this.collecShow = false
          this.$router.push({
            name: 'informationOver',
            query: {
              name: companyName,
              eid: eid
            }
          })
        }else if(res.data.type == 1){
          this.$confirm('后台生成数据需要一定的时间', '是否继续？', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 获取新闻信息
            this.$post(this.$Url.news.getData, {
              name: companyName
            }).then(data => {}).catch(e=>{console.log(e);})
            this.$get(this.$Url.search.generateData, {
              companyname: companyName,
              jueduidefen: true,
              eid: eid
            }).then(res => {
              if(res.status == 205){
                this.$message.warning(res.message)
              }
            }).catch(e=>{
              console.log(e);
            });
          }).catch(e=>{})
        }else if(res.data.type == 2){
          this.dialogPercent = true;
          this.percent =  Number(res.data.percent)||0
          types = setTimeout(() => {
            this.enterCompany(companyName, eid, false)
          },4000)
        }else if(res.data.type == 3){
          this.closeTypes();
          this.$message.error('数据计算失败，请联系后台管理员')
        }
      })
    },
    closeTypes(){
      this.dialogPercent = false
      clearTimeout(types)
      types = null
      // 中止请求
      this.cancel()
      this.dialogPercent = false
    },
    // 删除收藏
    deleteRow(row) { 
      this.$delete(`${this.$Url.company.collectDelete}/${row.companyId}`,{})
      .then(res => {
          if(res.status == 200){
              this.$message({
                type: 'success',
                message: '取消收藏成功'
              })
              this.fn()
          }else{
              this.$message({
                type: 'error',
                message: '取消收藏失败',
                duration: 1000
              })
          }
      }).catch(e=>{
          console.log(e);
      })
    },
    // 分页
    getCurrentPage(val) {
      this.currentPage = val;
      this.getCollect()
    }
  }
}
</script>
<style lang="scss">
.el-message-box{
  .el-button--primary {
    color: #FFF;
    background-color: $mainColor !important;
    border-color: $mainColor !important;
}
.el-button--primary:active,.el-button--primary:focus,.el-button--primary:hover{
  color: #FFF !important;
    background-color: $mainColor !important;
    border-color: $mainColor !important;
}
.el-button:focus, .el-button:hover {
    color: $mainColor;
    border-color: $mainColor;
    background-color: $hoverColor;
}
}
</style>
<style scoped>
.name_link:hover{
  text-decoration: underline;
  color:#0000ee;
  cursor: pointer;
}
</style>
